package com.gigmissions.client;


import com.extjs.gxt.ui.client.Style.Scroll;
import com.extjs.gxt.ui.client.data.BeanModel;
import com.extjs.gxt.ui.client.event.Events;
import com.extjs.gxt.ui.client.event.Listener;
import com.extjs.gxt.ui.client.event.SelectionChangedEvent;
import com.extjs.gxt.ui.client.store.ListStore;
import com.extjs.gxt.ui.client.util.Format;
import com.extjs.gxt.ui.client.widget.ContentPanel;
import com.extjs.gxt.ui.client.widget.ListView;
import com.gigmissions.client.model.Photo;


public class VenueSelectPanel extends ContentPanel {
	
	private ListStore<BeanModel> store;
	
	public VenueSelectPanel(ListStore<BeanModel> store){
		
		this.store = store;
		contructUI();
		
	}
	
	private void contructUI(){
		
		 //setScrollMode(Scroll.AUTOY);
		 setHeight(500);
		 setWidth(650);
		 setBodyBorder(false);
		 setId("images-view");
		
		 ListView<BeanModel> view = new ListView<BeanModel>() {
		      @Override
		      protected BeanModel prepareData(BeanModel model) {
		        String s = model.get("name");
		        s = s.replace("_", " ");
		         
		        model.set("shortName", Format.ellipse(s, 15));
		        return model;
		  }
		
		};

		view.setTemplate(getTemplate());
		view.setStore(store);
		view.setItemSelector("div.thumb-wrap");
		
		view.getSelectionModel().addListener(Events.SelectionChange,
		    new Listener<SelectionChangedEvent<BeanModel>>() {
		
		      public void handleEvent(SelectionChangedEvent<BeanModel> be) {
		        setHeading(((Photo)(be.getSelection().get(0).getBean())).getName().replace("_", " "));
		        //this guy needs to open the map info window to show the gigs
		  }
		
		});

		add(view);
		
	}

	private static native String getTemplate() /*-{
    return ['<tpl for=".">',
    '<div class="thumb-wrap" id="{name}" style="border: 1px solid white">',
    '<div class="thumb"><img src="{path}" title="{name}"></div>',
    '<span class="x-editable">{shortName}</span></div>',
    '</tpl>',
    '<div class="x-clear"></div>'].join("");
    
    }-*/;

}
